<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      body {
        font-size: 18px;
        font-family: Microsoft YaHei;
        margin: 0;
      }

      a {
        color: #6c6c6c;
        text-decoration: none;
      }

      a:hover {
        color: #0aa1ed;
      }

      .el-table .el-table__cell {
        padding: 0;
      }

      .p-image:hover {
        position: relative;
        bottom: 5px;
        /* 元素的阴影 x偏移量 y偏移量 浓度 范围 颜色 */
        box-shadow: 0 0 10px 5px #333;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-header style="height: 180px; padding: 0; margin-bottom: -1%">
          <div style="width: 1200px; margin: 0 auto">
            <img
              src="./imgs/logo.png"
              alt="logo"
              style="width: 300px; vertical-align: middle"
            />
            <span>
              <a href="#">首页</a
              ><el-divider direction="vertical"></el-divider>
              <a href="#">热点资讯</a
              ><el-divider direction="vertical"></el-divider>
              <a href="#">商家入驻</a
              ><el-divider direction="vertical"></el-divider>
              <a href="#">社会招聘</a>
              <el-divider direction="vertical"></el-divider>
              <a href="#">校园招聘</a>
              <el-divider direction="vertical"></el-divider>
              <a href="#">帮助中心</a>
            </span>
          </div>
          <!-- 蓝色导航栏开始-->
          <div>
            <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#409EFF"
              text-color="#fff"
              active-text-color="#ffd04b"
              style="padding-left: 11%"
            >
              <el-menu-item index="1">精彩活动</el-menu-item>
              <el-menu-item index="2">测试</el-menu-item>
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
              <el-menu-item index="4"
                ><a href="https://www.ele.me" target="_blank"
                  >订单管理</a
                ></el-menu-item
              >
            </el-menu>
          </div>
        </el-header>
        <el-main style="width: 1200px; margin: 0 auto">
          <el-row gutter="20">
            <el-col span="12">
              <el-card>
                <img :src="product.url" width="100%" alt="" />
              </el-card>
            </el-col>
            <el-col span="12">
              <p style="font-size: 25px">{{product.title}}</p>
              <el-divider></el-divider>
              <p style="font-size: 20px; color: #999">
                销量：{{product.saleCount}} 浏览量：{{product.viewCount}}
              </p>
              <p style="font: 25px; font-weight: bold">
                ￥{{product.price}}
                <span style="font-size: 18px; color: #999"
                  >原价：<s>{{product.oldPrice}}</s></span
                >
              </p>
              <!-- 二维码部分 -->
              <el-row gutter="20" style="text-align: center">
                <el-col :span="8">
                  <el-card>
                    <img src="./imgs/ewm.jpg" width="100%" alt="" />
                    <span>扫码购买</span>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card>
                    <img src="./imgs/ewm.jpg" width="100%" alt="" />
                    <span>扫码了解商品详情</span>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card>
                    <img src="./imgs/ewm.jpg" width="100%" alt="" />
                    <span>扫码进入酷鲨商城公众号</span>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-main>
        <el-footer style="padding: 0">
          <!-- 波浪图片部分 -->
          <div
            style="
              background-image: url('./imgs/wave.png');
              height: 40px;
              width: 100%;
            "
          ></div>
          <!-- 底部文字部分 -->
          <div
            style="
              background-color: #3f3f3f;
              color: #b1b1b1;
              height: 100px;
              font-size: 14px;
              text-align: center;
              padding: 30px;
            "
          >
            <p>Copyright &copy; W20大数据1班</p>
            <p>涵盖25名同学，致力于打造25名IT人才</p>
            <p>
              <a href="https://www.tmmoc.cn" style="color: #b1b1b1">
                达内在线 www.tmooc.cn </a
              >专注于IT技能培训
            </p>
          </div>
        </el-footer>
      </el-container>
    </div>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            product: {
              title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",
              price: 233,
              oldPrice: 598,
              url: "imgs/a.jpg",
              saleCount: 2342,
              viewCount: 18842,
            },
          };
        },
      });
    </script>
  </body>
</html>
